<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title>CustomElements Workbench</title>
    <meta charset="UTF-8">
    <script src="../custom-elements.js"></script>
  </head>
  <body>
    <x-foo>XFoo</x-foo>
    <x-foofoo>XFoo</x-foo>
    <button id="xfoo" is="x-foo">XFoo</button>
    <button id="xfoofoo" is="x-foofoo">XFoo</button>
    <script>
      XFoo = document.register('x-foo', {
        extends: 'button',
        prototype: Object.create(HTMLButtonElement.prototype, {
          readyCallback: {
            value: function() {
              console.log('readyCallback');
            },
            enumerable: true
          },
          foo: {
            value: function() {
              console.log('foo');
            },
            enumerable: true
          }
        })
      });
      XFooFoo = document.register('x-foofoo', {
        extends: 'x-foo',
        prototype: Object.create(HTMLButtonElement.prototype, {
          readyCallback: {
            value: function() {
              console.log('readyCallback');
            },
            enumerable: true
          },
          foo: {
            value: function() {
              console.log('foofoo');
            },
            enumerable: true
          }
        })
      });
      window.addEventListener('load', function() {
        document.upgradeElements();
        xfoofoo.foo();
      });
    </script>
  </body>
</html>
